<template>
  <div class="card">
    <a-spin :spinning="loading">
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
        <a-form-item v-for="item in form.rule" :key="item.level_id" :label="item.label">
          <a-checkbox-group v-model="item.enable_level_ids" :options="options" />
        </a-form-item>
        <a-form-item label="允许调整间推">
          <a-radio-group v-model="form.enable_indirect">
            <a-radio :value="1"> 是 </a-radio>
            <a-radio :value="0"> 否 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="允许降级">
          <a-radio-group v-model="form.enable_level_down">
            <a-radio :value="1"> 是 </a-radio>
            <a-radio :value="0"> 否 </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <a-form style="margin: 40px 0" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
          <a-button type="primary" style="margin-right: 10px" @click="upload">提交</a-button>
          <a-button @click="getInfo">重置</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </div>
</template>

<script>
import { getUserGradeListAPI } from '@/api/userinfo.js'
import { getAppListAPI } from '@/api/product.js'
import { getIncomeListAPI } from '@/api/follow.js'
export default {
  data() {
    return {
      loading: false,
      form: {},
      options: []
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      try {
        this.loading = true
        const result = await getAppListAPI({ brand_id: process.env.VUE_APP_BRAND_ID, scene: 'user_change_level_rule' })
        const data = await getUserGradeListAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
        this.options = data.data.map(item => {
          item.label = item.name
          item.value = item.id
          return item
        })
        this.form = result.data
      } finally {
        this.loading = false
      }
    },
    async upload() {
      const form = { ...this.form, brand_id: process.env.VUE_APP_BRAND_ID, scene: 'user_change_level_rule' }
      const result = await getIncomeListAPI(form)
      this.getInfo()
      this.$message.success(result.msg)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-form-item {
  margin: 0;
}
</style>
